import { useState, useEffect, useRef } from "react";
import { Form, Button, Select, Checkbox, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import PrintModal from "./PrintModal";
import { getExpressCompanyByOutboundNoListOp } from '../../service';

const { Option } = Select;

const DeliverOrder = ({ visible, selectedKeys, outboundNoList, selectedRows, handlePrint, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [printVisible, setPrintVisible] = useState(false); //打印弹窗
	const [expressList, setExpressList] = useState([]);

	const sortType = useRef(1);

	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		sortType.current = form.getFieldsValue()?.sortType;
		handleGetExpressList();
	};

	const handleGetExpressList = async () => {
		const arr = outboundNoList.map(item => item.outboundNo);
    const { data, success } = await getExpressCompanyByOutboundNoListOp(arr);
		if(success && data?.length){
			setExpressList(data);
		  setPrintVisible(true);
		}
	}

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	const PrintModalProps = {
		printPageType: 2,
		visible: printVisible,
		outboundNoList,
		selectedKeys,
		selectedRows,
		expressList,
		sortType: sortType.current,
		handlePrint,
		handleOk,
		handleCancel() {
			setPrintVisible(false);
		},
	};

	return (
		<CommonModal
			title={{ title: "发货已配齐订单" }}
			// okText={"打印面单"}
			width="456px"
			visible={true}
			onOk={onOk}
			footer={
				<div style={{ textAlign: "right" }}>
					<Button size="middle" onClick={onCancel}>
						取消
					</Button>
					<Button size="middle" type="primary" onClick={onOk}>
						打印面单
					</Button>
				</div>
			}
			onCancel={onCancel}
			minHeight="150px"
		>
			<div style={{textIndent:'18px'}}>
			  <p style={{fontSize:'15px', marginBottom:'12px'}}>是否发货所有已配齐的订单？</p>
				<div>
					本次将打印的订单数：<span className={"common-color9"}>{outboundNoList.length}</span>
				</div>
			</div>
			<Form form={form} name="mark-unuaual-modal" style={{ marginTop: "12px" }} initialValues={{sortType: 1}}>
				<Form.Item name='sortType' label="批量打印出单顺序" rules={[{required:'true'}]}>
          <Select>
					  <Option key={1} value={1}>分拣墙排序</Option>
						<Option key={2} value={2}>分拣框排序</Option>
					</Select>
				</Form.Item>
			</Form>
			<div className="common-color9" style={{fontSize:"12px"}}>
				<p>注：</p>
				<p>1、分拣墙排序为从A到Z的顺序，当前分拣墙打印完，再打印下个分拣墙数据以此类推</p>
				<p>2、分拣框排序为从1往后排，优先打印所有分拣墙1号分拣框，打印完再打印2号框以此类推</p>
			</div>
			{printVisible && <PrintModal {...PrintModalProps} />}
		</CommonModal>
	);
};

export default DeliverOrder;
